import { defineComponent } from 'vue';
import styles from './index.module.scss';
import { LayoutContainer } from '@/layouts';
import { useAuthStore } from '@/stores/auth.ts';
import { useRouter } from 'vue-router'; // 自动引用同名 CSS 文件
export type ResultModel = {code: number, message: string | null, body: number[]}
export default defineComponent({
    name: 'index-view',
    props: {},
    setup() {
        const router = useRouter();
        const authStore = useAuthStore();
        const authHandle = async () => {
            const res:ResultModel = await Promise.resolve({
                code: 0,
                message: '登录成功',
                body: [1, 2],
            });
            console.log(res);
            if (res.code !== 0) {
                console.warn(res.message || '登录失败');
                return;
            }
            authStore.setterToken(res.body.join(','))
            router.push('/')
        };
        const onSubmitHandle = (e: Event) => {
            e.preventDefault();
            authHandle();
        };
        return () => (
            <div class={styles['container']}>
                <form class={styles['form-container']} onSubmit={onSubmitHandle}>
                    <LayoutContainer>
                        <h1>账号登录</h1>
                        <div class={styles['form-item']}>
                            <label>账号</label>
                            <input type="text" placeholder="请输入账号" />
                        </div>
                        <div class={styles['form-item']}>
                            <label>密码</label>
                            <input type="password" placeholder="请输入密码" />
                        </div>
                        <div class={'flex flex-row-between'}>
                            <div>
                                <label>记住密码</label>
                                <input type="checkbox" />
                            </div>
                            <div>
                                <label>忘记密码</label>
                                <a href="#">注册</a>
                            </div>
                        </div>
                        <div class={styles['form-item']}>
                            <button type={'submit'}>登录</button>
                        </div>
                    </LayoutContainer>
                </form>
            </div>
        );
    },
});
